<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=s, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 视口 -->
    使用meta标签设置视口宽度，适配不同设备宽度的网页
    name="viewport" content="width=s, initial-scale=1.0"
    viewport：视口
    width=device-width：视口宽度 = 设备宽度
    initial-scale=1.0：缩放1倍（不缩放）

    <!-- 分辨率 -->
    物理分辨率
    生产屏幕时就固定的，它是不可被改变的
    逻辑分辨率是 软件（驱动）决定的

    一般设计稿都是w375,这时候一般是以苹果6/7/8的逻辑分辨率为准做的
    写页面是要以逻辑分辨率为准,看图要X2

    <!-- 流式布局 -->
    宽度： 百分比
    高度： 固定
</body>

</html>